<template>
  <div class="music">
    <div class="home" @click="closeVideo">
      <router-link to="/">
        <img src="./../assets/images/videoplay/home.png" alt="">
      </router-link>
    </div>
    <div class="back" @click="closeVideo">
      <img src="./../assets/images/videoplay/back.png" alt="">
    </div>
    <video ref="video" class="videoarea" id="video" :src="playUrl" autoplay></video>
    <div class="play-list">
      <ul id="playlist" class="ul-play-list">
        <li class="li-play-list" :class="{'play-list-active': item.isSelected}" :url="item.url" v-for='(item, index) in musicPlayList' :key='index' @click="playItem(item)">
          {{item.name}}
        </li>
      </ul>
    </div>
    <div class="play" @click="playFun">
      <img :src="playImg" alt="">
    </div>
    <div class="zuo" @click="zuoFun">
      <img src="./../assets/images/videoplay/zuo.png" alt="">
    </div>
    <div class="you" @click="youFun">
      <img src="./../assets/images/videoplay/you.png" alt="">
    </div>
    <div id="progressWrap" class="progressWrap" v-on:click="move">
      <div id="fill" class="fill"></div>
      <!--<div id="playProgress" class="playProgress"></div>-->
    </div>
    <div class="yin">
      <img src="./../assets/images/musicplay/yin.png" alt="">
    </div>
    <div id="yinliangWrap" class="yinliangWrap" @click="changevolume">
      <div id="yinliangProgressPoint" class="yinliangProgressPoint"></div>
    </div>
    <div class="xunhuan" @click="fullFun">
      <img src="./../assets/images/videoplay/full.png" alt="">
    </div>
  </div>
</template>

<script>
  export default {
    name: 'video-play',
    props: ['info'],
    data () {
      return {
        flag: '',
        play: true,
        playUrl: '',
        mp4time: '',
        playIndex: 0,
        playImg: 'static/play/stop.png',
        musicPlayList: [],
        xunHuanMode: 0
      }
    },
    mounted () {
      let that = this
      console.log(that.info)
      that.musicPlayList = that.info
      that.playUrl = that.musicPlayList[0].url
      that.mp4time = that.musicPlayList[0].duration
      that.flag = setInterval(function () {
        that.onChange()
      }, 1000)
      that.playItem(that.musicPlayList[that.playIndex])
      // if (that.info.length === 1) {
      //   that.fullFun()
      // }
      // document.onkeydown = function () {
      //   let key = window.event.keyCode
      //   if (key === 27 && (that.info.length === 1)) {
      //     that.closeVideo()
      //   }
      // }
    },
    methods: {
      playFun: function () {
        this.play = !this.play
        if (this.play === true) {
          let that = this
          this.$refs.video.play()
          this.playImg = 'static/play/stop.png'
          this.flag = setInterval(function () {
            that.onChange()
          }, 500)
        } else {
          this.$refs.video.pause()
          this.playImg = 'static/play/play.png'
          clearInterval(this.flag)
        }
        console.log(this.musicPlayList[this.playIndex])
        this.playItem(this.musicPlayList[this.playIndex])
      },
      onChange: function () {
        var mp4name = document.getElementById('video')
        var mp4time = mp4name.duration
        var percent = mp4name.currentTime / mp4time
        var fill = document.getElementById('fill')
        var progressWrap = document.getElementById('progressWrap')
        // var slider = document.getElementById('playProgress')
        fill.style.width = percent * (progressWrap.offsetWidth) + 'px'
        // slider.style.left = percent * (progressWrap.offsetWidth) + 'px'
        if (mp4time === mp4name.currentTime) {
          this.youFun()
        }
      },
      zuoFun: function () {
        clearInterval(this.flag)
        console.log('zuoFun')
        if (this.playIndex === 0) {
          console.log('------')
          // 第一首
          if (this.xunHuanMode === 3 || this.xunHuanMode === 0 || this.xunHuanMode === 1) {
            // 列表循环, 返回第一首
            console.log('000000')
            this.playItem(this.musicPlayList[this.musicPlayList.length - 1])
          } else if (this.xunHuanMode === 2) {
            // 随机播放
            this.playItem(this.musicPlayList[Math.floor(Math.random() * this.musicPlayList.length)])
          }
        } else {
          if (this.xunHuanMode === 2) {
            // 随机播放
            this.playItem(this.musicPlayList[Math.floor(Math.random() * this.musicPlayList.length)])
          } else {
            // 下一首
            this.playItem(this.musicPlayList[this.playIndex - 1])
          }
        }
      },
      youFun: function () {
        clearInterval(this.flag)
        if (this.musicPlayList.length === this.playIndex + 1) {
          // 结尾
          this.playItem(this.musicPlayList[0])
        } else {
          this.playItem(this.musicPlayList[this.playIndex + 1])
        }
      },
      playItem: function (selectedItem) {
        clearInterval(this.flag)
        let that = this
        this.flag = setInterval(function () {
          that.onChange()
        }, 500)
        this.playUrl = selectedItem.url
        let index = 0
        this.musicPlayList.forEach(item => {
          item.isSelected = (item.name === selectedItem.name)
          index += 1
          if (item.name === selectedItem.name) {
            this.playIndex = index - 1
          }
        })
      },
      fullFun: function () {
        this.$refs.video.webkitRequestFullScreen()
        // if (this.$refs.video.webkitRequestFullScreen) {
        //   this.$refs.video.webkitRequestFullScreen()
        // } else {
        //   document.webkitCancelFullScreen()
        // }
      },
      move: function (e) {
        var fill = document.getElementById('fill')
        // var slider = document.getElementById('playProgress')
        var mp4name = document.getElementById('video')
        var mp4time = mp4name.duration
        if (e.offsetX > 0) {
          fill.style.width = e.offsetX + 'px'
          // slider.style.left = e.offsetX + 'px'
          var avg = 640 / mp4time
          var itemtime = e.offsetX / avg
          mp4name.currentTime = itemtime
        }
      },
      changevolume: function (e) {
        var slider = document.getElementById('yinliangProgressPoint')
        slider.style.left = e.offsetX + 'px'
        this.$refs.video.volume = e.offsetX / 77
      },
      closeVideo: function () {
        this.$emit('closeVideo')
        clearInterval(this.flag)
      }
    }
  }
</script>

<style scoped>
  video::-internal-media-controls-download-button {
    display: none;
  }

  video::-webkit-media-controls-enclosure {
    overflow: hidden;
  }

  video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
  }
  .music {
    color: #aaa;
    background: url('~@/assets/images/videoplay/bg.png');
    width: 1280px;
    height: 720px;
    z-index: 200;
  }
  .music > div {
    position: absolute;
  }
  .text {
    width: 80px;
    height: 30px;
    top: 80px;
    left: 625px;
    color: rgb(242, 219, 183);
    font-size: 35px;
  }
  .home {
    width: 166px;
    height: 52px;
    top: 50px;
    left: 80px;
  }
  .back {
    width: 166px;
    height: 52px;
    top: 102px;
    left: 80px;
  }
  .play {
    top: 629px;
    left: 103px;
    width: 78px;
    height: 82px;
  }
  .progressWrap {
    position: absolute;
    width: 640px;
    height: 18px;
    top: 662px;
    left: 330px;
    background-image: url("~@/assets/images/musicplay/dahuakuai.png");
    cursor: pointer;
    overflow: hidden;
  }
  .fill{
    position: absolute;
    display: inline-block;
    width:0px;
    height:18px;
    background: #0d8cd8;
  }
  .playProgress {
    position: absolute;
    display:inline-block;
    background-color: #0d8cd8;
    left: 0px;
    width: 10px;
    height: 18px;
    border-radius: 8px;
  }
  .zuo {
    top: 648px;
    left: 204px;
  }
  .you {
    top: 648px;
    left: 259px;
  }
  .yin {
    top: 646px;
    left: 990px;
  }
  .yinliangWrap {
    position: absolute;
    width: 77px;
    height: 12px;
    top: 663px;
    left: 1046px;
    cursor: pointer;
    background-image: url('~@/assets/images/musicplay/yinliang.png');
  }
  .yinliangProgressPoint {
    position: absolute;
    display: inline-block;
    background-color: #fff;
    width: 18px;
    height: 18px;
    left:60px;
    top: -3px;
    border-radius: 50%;
  }
  .xunhuan {
    top: 646px;
    left: 1147px;
  }
  .xunhuanmianban {
    background-image: url('~@/assets/images/musicplay/xunhuanmianban.png');
    position: absolute;
    width: 77px;
    height: 112px;
    font-size: 16px;
    color: #fff;
    top: 528px;
    left: 1129px;
    cursor: pointer;
  }
  .mianbanID {
    margin: 5px;
    padding: 0;
    list-style-type: none;
  }
  .mianban {
    margin-top: 5px;
    margin-bottom: 6px;
  }
  .play-list {
    position: absolute;
    top: 196px;
    left: 0px;
    height: 408px;
    width: 336px;
    overflow: auto;
    text-align: center;
  }
  .ul-play-list {
    margin: 0;
    padding: 0;
  }
  .li-play-list {
    cursor: pointer;
    font-size: 16pt;
    color: #321c00;
    padding-top: 10px;
    padding-bottom: 10px;
    list-style-type: none;
    border-bottom: 1px solid #3b2412;
    margin-left: 10px;
  }
  .play-list-active {
    color: #F2DBB7;
    font-size: 22pt;
  }
  .xunhuan-list-active {
    color: #321c00;
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #95673D;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #5C2F11;
  }
  .videoarea {
      position: absolute;
      top: 36px;
      left: 372px;
      width: 907px;
      height: 568px;
  }
</style>
